<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<!--
  自定义事件的流程：
        1.在子组件中，通过$emit()来发射事件
        2.在父组件中，通过v-on来监听子组件事件
-->
<body>
<!--父组件模板-->
<div id="app">
<!--  父组件通过v-on：监听子组件发射过来的事件
       注意：这里的itemClick事件名称，不能写驼峰
         cpnClick事件，参数不用写，默认把item传过去-->
  <cpn @item-click="cpnClick"></cpn>
</div>

<!--子组件模板-->
<template id="tcpn">
  <div>
    <button v-for="item in categories"
            @click="btnClick(item)">
      {{item.name}}
    </button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  //1.cpn是子组件
  const cpn={
    template:'#tcpn',
    data(){
      return{
        categories:[
          {id:'a',name:'热门推荐'},
          {id:'b',name:'手机数码'},
          {id:'c',name:'家用家电'},
          {id:'d',name:'电脑办公'}
        ]
      }
    },
    methods:{
      btnClick(item){
        // this.$emit('事件名称')：发射自定义事件
        //这里的itemClick事件名称，不能写驼峰
        this.$emit('item-click',item)
      }
    }
  }
  
  //2.vue实例是父组件
  const app=new Vue({
    // el引用了父组件模板
    el: '#app',
    data: {
      message: '你好'
    },
    //注册一个局部组件（cpn子组件）
    components:{
      cpn
    },
    methods:{
      // 参数传进来的时候，要写参数
      cpnClick(item){
        console.log(item.name);
      }
    }
  })

</script>
</body>
</html>